<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common :: header"/>
<body>
<div class="page">
    <div class="card">
        <div class="card-body">
            <div id="table"></div>
            <div id="toolbar" style="display: none">
                <a href="#" onclick="read()" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">标记已读</a>
                <a href="#" onclick="readAll()" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">全部已读</a>
                <input id="btnShowRead">
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var datas = [[${@dict.getType('sys_msg_type')}]];

    $(function() {
        $('#table').datagrid({
            url: '/system/msg/list',
            fit: true,
            fitColumns: true,
            nowrap: true,
            pagination: true,
            pageSize: 20, // 每一页多少条数据
            pageList: [ 10, 20, 30, 40, 50 ], // 可以选择的每页的大小的combobox
            idField: 'msgId',
            sortName: 'msgId',
            sortOrder: 'desc',
            toolbar: '#toolbar',
            rowStyler: function(index,row){
                if (row.status == 2){
                    return 'color:#c2c2c2;';
                }
            },
            onLoadSuccess:function(data){
                $("#table").datagrid("clearSelections");
            },
            columns:[ [
                {field: 'ck', checkbox: true },
                {field: 'content', title: '消息内容', width: 500},
                {field: 'msgType', title: '消息类型', align:'center',width: 80
                    ,formatter: value => dictFormatter(datas, value)
                },
                {field: 'createTime',title: '发送时间',align:'center',sortable: true, width: 140,formatter: timeFormatter}
            ] ]
        });
    });

    $('#btnShowRead').checkbox({
        label:'只看未读',
        onChange:function (checked) {
            var params = checked ? {status: 1} : {};
            dm.search('table', params);
        }
    });

    function read() {
        dm.getRows('table', 'msgId', function (ids) {
            $.post('/system/msg/read',{ids: ids}, (res) => {
                dm.search('table');
                if(res.data<=0){
                    $('#msg_dot', window.parent.document).addClass('layui-hide');// 隐藏小圆点
                }
            },'json')
        })
    }
    function readAll() {
        dm.post('/system/msg/readAll', {}, function () {
            dm.search('table');
        })
    }

</script>
</body>
</html>
